<template>
  <!--贵宾通道页面-->
  <div>
    <div class="guibinting">
      <div class="header">
        <div class="city" @click="toggle"><span>{{city}}</span><img src="../../assets/select.png" alt="" width="12">
        </div>
        <ul v-show="isshow" class="citylist">
          <li v-for="item in cityList" @click="check(item.cityName)">{{item.cityName}}</li>
        </ul>
        <div class="search"><input type="text" v-model="viponlyName" placeholder="贵宾通道名称/关键字"><img
          src="../../assets/search.png" alt="" width="16" @click="mysearch(viponlyName)"></div>
      </div>
      <wv-tabs v-model="activeIndex" class="container" @click="getData(activeIndex)">
        <wv-tab title="全部">
          <div v-if="nowAirport">
            <p class="all"><img src="../../assets/dingwei.png" alt="" width="13" v-if="nowAirport.isLocation">{{nowAirport.airportName}}
            </p>
            <div class="lists" v-for="i in nowAirport.firstLetterList">
              <div v-for="viponly in i.viponlyList">
                <ul class="msg">
                  <li>{{viponly.goodsName | goodsNameTextNumFilter }}</li>
                  <li><img src="../../assets/clock.png" alt="" width="12">{{viponly.viponlyTime}}</li>
                  <li><img src="../../assets/address.png" alt="" width="12">{{viponly.viponlyAddress}}</li>
                  <li v-if="viponly.isAppoint==1"><img src="../../assets/noyuyue.png" alt="" width="15">无需预约</li>
                  <li v-if="viponly.isAppoint==2"><img src="../../assets/yuyue.png" alt="" width="15">需预约</li>
                <!--  <li v-if="viponly.viponlyPhone"><img src="../../assets/call.png" alt="" width="14">{{viponly.viponlyPhone}}
                  </li>-->
                  <li>
                    <wv-button type="default" :plain="true" @click="goGoodsDetail(viponly.goodsId)">查看详情</wv-button>
                  </li>
                </ul>
                <p class="tip">{{viponly.viponlyTips}}</p>
              </div>
            </div>
          </div>
          <div class="lists" v-for="item in firstLetterList">
            <div v-if="item.viponlyList.length>0"><p>{{item.firstLetter}}</p></div>
            <div v-for="viponly in item.viponlyList">
              <ul class="msg">
                <li>{{viponly.goodsName}}</li>
                <li><img src="../../assets/clock.png" alt="" width="12">{{viponly.viponlyTime}}</li>
                <li><img src="../../assets/address.png" alt="" width="12">{{viponly.viponlyAddress}}</li>
                <li v-if="viponly.isAppoint==1"><img src="../../assets/noyuyue.png" alt="" width="15">无需预约</li>
                <li v-if="viponly.isAppoint==2"><img src="../../assets/yuyue.png" alt="" width="15">需预约</li>
              <!--  <li v-if="viponly.viponlyPhone"><img src="../../assets/call.png" alt="" width="14">{{viponly.viponlyPhone}}
                </li>-->
                <li>
                  <wv-button type="default" :plain="true" @click="goGoodsDetail(viponly.goodsId)">查看详情</wv-button>
                </li>
              </ul>
              <p class="tip">{{viponly.viponlyTips}}</p>
            </div>
          </div>
        </wv-tab>

        <wv-tab title="无需预约">
          <div v-if="nowAirport">
            <p class="all"><img src="../../assets/dingwei.png" alt="" width="13" v-if="nowAirport.isLocation">{{nowAirport.airportName}}
            </p>
            <div class="lists" v-for="i in nowAirport.firstLetterList">
              <div v-for="viponly in i.viponlyList">
                <ul class="msg">
                  <li>{{viponly.goodsName}}</li>
                  <li><img src="../../assets/clock.png" alt="" width="12">{{viponly.viponlyTime}}</li>
                  <li><img src="../../assets/address.png" alt="" width="12">{{viponly.viponlyAddress}}</li>
                  <li v-if="viponly.isAppoint==1"><img src="../../assets/noyuyue.png" alt="" width="15">无需预约</li>
                  <li v-if="viponly.isAppoint==2"><img src="../../assets/yuyue.png" alt="" width="15">需预约</li>
                 <!-- <li v-if="viponly.viponlyPhone"><img src="../../assets/call.png" alt="" width="14">{{viponly.viponlyPhone}}
                  </li>-->
                  <li>
                    <wv-button type="default" :plain="true" @click="goGoodsDetail(viponly.goodsId)">查看详情</wv-button>
                  </li>
                </ul>
                <p class="tip">{{viponly.viponlyTips}}</p>
              </div>
            </div>
          </div>
          <div class="lists" v-for="item in firstLetterList">
            <div v-if="item.viponlyList.length>0"><p>{{item.firstLetter}}</p></div>
            <div v-for="viponly in item.viponlyList">
              <ul class="msg">
                <li>{{viponly.goodsName}}</li>
                <li><img src="../../assets/clock.png" alt="" width="12">{{viponly.viponlyTime}}</li>
                <li><img src="../../assets/address.png" alt="" width="12">{{viponly.viponlyAddress}}</li>
                <li v-if="viponly.isAppoint==1"><img src="../../assets/noyuyue.png" alt="" width="15">无需预约</li>
                <li v-if="viponly.isAppoint==2"><img src="../../assets/yuyue.png" alt="" width="15">需预约</li>
              <!--  <li v-if="viponly.viponlyPhone"><img src="../../assets/call.png" alt="" width="14">{{viponly.viponlyPhone}}
                </li>-->
                <li>
                  <wv-button type="default" :plain="true" @click="goGoodsDetail(viponly.goodsId)">查看详情</wv-button>
                </li>
              </ul>
              <p class="tip">{{viponly.viponlyTips}}</p>
            </div>
          </div>

        </wv-tab>
        <wv-tab title="需预约">
          <div v-if="nowAirport">
            <p class="all"><img src="../../assets/dingwei.png" alt="" width="13" v-if="nowAirport.isLocation">{{nowAirport.airportName}}
            </p>
            <div class="lists" v-for="i in nowAirport.firstLetterList">
              <div>
                <div v-for="viponly in i.viponlyList">
                  <ul class="msg">
                    <li>{{viponly.goodsName}}</li>
                    <li><img src="../../assets/clock.png" alt="" width="12">{{viponly.viponlyTime}}</li>
                    <li><img src="../../assets/address.png" alt="" width="12">{{viponly.viponlyAddress}}</li>
                    <li v-if="viponly.isAppoint==1"><img src="../../assets/noyuyue.png" alt="" width="15">无需预约</li>
                    <li v-if="viponly.isAppoint==2"><img src="../../assets/yuyue.png" alt="" width="15">需预约</li>
                   <!-- <li v-if="viponly.viponlyPhone"><img src="../../assets/call.png" alt="" width="14">{{viponly.viponlyPhone}}
                    </li>-->
                    <li>
                      <wv-button type="default" :plain="true" @click="goGoodsDetail(viponly.goodsId)">查看详情</wv-button>
                    </li>
                  </ul>
                  <p class="tip">{{viponly.viponlyTips}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="lists" v-for="item in firstLetterList">
            <div v-if="item.viponlyList.length>0"><p>{{item.firstLetter}}</p></div>
            <div v-for="viponly in item.viponlyList">
              <ul class="msg">
                <li>{{viponly.goodsName}}</li>
                <li><img src="../../assets/clock.png" alt="" width="12">{{viponly.viponlyTime}}</li>
                <li><img src="../../assets/address.png" alt="" width="12">{{viponly.viponlyAddress}}</li>
                <li v-if="viponly.isAppoint==1"><img src="../../assets/noyuyue.png" alt="" width="15">无需预约</li>
                <li v-if="viponly.isAppoint==2"><img src="../../assets/yuyue.png" alt="" width="15">需预约</li>
               <!-- <li v-if="viponly.viponlyPhone"><img src="../../assets/call.png" alt="" width="14">{{viponly.viponlyPhone}}</li>-->
                <li>
                  <wv-button type="default" :plain="true" @click="goGoodsDetail(viponly.goodsId)">查看详情</wv-button>
                </li>
              </ul>
              <p class="tip">{{viponly.viponlyTips}}</p>
            </div>
          </div>
        </wv-tab>
      </wv-tabs>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {viponlyData, getMapInfo} from '../../../test/unit/http'
  import {wxApi} from '../../../test/unit/flyme_weixin'

  export default {
    name: 'guibinting',
    props: {},
    data() {
      return {
        isshow: false,
        city: '城市',
        activeIndex: 0,
        titles: '首都机场贵宾通道',
        viponlyName: "",
        cityList: [],
        firstLetterList: [],
        nowAirport: {},
        isOld: false
      };
    },
    methods: {
      toggle() {
        this.isshow = !this.isshow
      },
      check(item) {
        this.city = item;
        this.isshow = !this.isshow;
        let params = {};
        if (this.activeIndex != 0) {
          params = {
            isAppoint: this.activeIndex,
            cityName: this.city
          };
        } else {
          params = {
            cityName: this.city
          };
        }
        this.getVipOnlyData(params);
      },
      getVipOnlyData(params) {
        viponlyData(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.cityList = res.object.cityList;
            this.nowAirport = res.object.nowAirport;
            this.firstLetterList = res.object.firstLetterList;
            this.isOld = res.object.isOld;
          }
        })
      },
      getData(activeIndex) {
        let params = {};
        if (activeIndex != 0) {
          if (activeIndex == 1) {
            params['isAppoint'] = 1;
          }
          if (activeIndex == 2) {
            params['isAppoint'] = 2;
          }
        }
        this.init(params);
      },
      mysearch(viponlyName) {
        let params = {};
        if (this.activeIndex != 0) {
          params = {
            isAppoint: this.activeIndex,
            cityName: this.city,
            goodsName: viponlyName
          };
        } else {
          params = {
            cityName: this.city,
            goodsName: viponlyName
          };
        }
        this.init(params);
      },
      init(params) {
        var that = this;
        wxApi.init(function () {
          wxApi.getLocation({
            callback: function (res) {
              console.log(res);
              var lat = res.latitude;
              var lng = res.longitude;
              var mapParams = {};
              mapParams['location'] = lat + "," + lng;
              getMapInfo(mapParams).then(res => {
                console.log(res);
                var cityCode = res.result.cityCode;
                console.log(cityCode);
                params['cityCode'] = cityCode;
                that.getVipOnlyData(params);
              })
            }
          });
        });
      },
      goGoodsDetail(goodsId) {
        this.$router.push({path: 'tongdaodetail', query: {goodsId: goodsId, entrySource: 'home'}});
      }
    },
    created() {
      this.init({});
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .container {
    position: relative;
    z-index: 1;
  }

  input::-webkit-input-placeholder {
    color: #999;
    font-size: 14px;
  }

  .header {
    display: flex;
    padding: 10px;
    position: relative;
    margin-bottom: 10px;
    overflow: visible;
    z-index: 2;

    .citylist {
      position: absolute;
      width: 88%;
      top: 75px;
      left: 10px;
      right: 10px;
      text-align: left;
      padding: 10px;
      border: 1px solid #eee;
      background-color: #fff;
    }

    .city, .search input {
      border: 1px solid #eee;
      box-shadow: 0 3px 4px rgba(17, 17, 17, 0.05);
      border-radius: 7px;
      height: 25px;
      line-height: 25px;
      padding: 10px;
      color: #111;
    }

    .city {
      flex: 0 100px;
      margin-right: 10px;

      img {
        float: right;
        margin-top: 10px;
      }
    }

    .search {
      position: relative;
      width: calc(100% - 110px);

      input {
        width: 90%;
      }

      img {
        position: absolute;
        right: 20px;
        top: 16px;
      }
    }
  }

  .all {
    color: #111;
    text-align: left;
    padding: 10px;

    img {
      vertical-align: middle;
      margin-right: 10px;
    }
  }

  .msg {
    text-align: left;
    padding: 10px;
    font-size: 10px;
    color: #666;
    position: relative;

    li {
      line-height: 25px;

      button {
        background-image: linear-gradient(to left, #ff8551, #f9964e);
        color: #fff;
        height: 30px;
        line-height: 30px;
        border-radius: 10px;
        border: none;
        width: 90px;
        position: absolute;
        font-size: 14px;
        bottom: 5px;
        right: 10px;
      }
    }

    li:first-child {
      font-size: 15px;
      color: #111;
    }

    img {
      vertical-align: middle;
      margin-right: 10px;
    }
  }

  .tip {
    font-size: 12px;
    color: #999;
    margin: 10px;
    text-align: left;
    border-top: 1px dashed #eee;
    padding-top: 10px;
  }

  .lists {
    div > p:not(.tip) {
      background-color: #f8f8f8;
      font-size: 17px;
      color: #666;
      padding: 10px;
      text-align: left;
    }
  }
</style>
